<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>待付款</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/all.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../../js/fanhui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/ajax.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app-dfk">
			<header>
				<van-nav-bar @click-left="onClickLeft" style="background-color:red;">
					<van-icon slot="left" name="arrow-left" color="white"></van-icon>
					<label slot="title" style="color: white;">我的订单</label>
				</van-nav-bar>
			</header>
			<section>
				<li v-for="(item, index) in list" :name="item.id" style="font-family: '宋体';">
					<van-row>
						<van-col span="19" offset="1">
							<span>
								订单编号
							</span>
						</van-col>
						<van-col span="4">
							<span style="color:red">
								{{item.StatusName}}
							</span>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="23" offset="1">
							<span>
								{{item.Code}}
							</span>
						</van-col>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="24">
							<van-card :num="item.GoodsList[0].BuyCount" :price="item.GoodsList[0].GoodsMarketPrice" :title="item.GoodsList[0].Name">
								<img slot="thumb" :src="item.GoodsList[0].GoodsImageUrl" onerror="javascript:this.src='../../img/alt-big.jpg';" style="width: 100%; height: 100%;">
							</van-card>
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12" offset="6">
							<span style="font-size: 10px;">
								共1件商品，合计：￥{{item.GoodsList[0].GoodsMarketPrice}}(含运费￥0.00)
							</span>
						</van-col>
					</van-row>
					<van-row style="margin-top: 10px;">
						<van-col span="12" offset="12">
							<van-button round type="danger" size="small" @click="pay">支付</van-button>
							<van-button round type="default" size="small" @click="quxiao(item.Id)">取消订单</van-button>
						</van-col>
					</van-row>
				</li>
			</section>
			<footer></footer>
		</div>
	</body>
	<script>
		var newUser = JSON.parse(localStorage.getItem("user")); //从localStorage里取数据(字符串格式)并且把字符串格式转换成Json格式
		var vm = new Vue({
			el: "#app-dfk",
			data: {
				StatusName: "",
				bianhao: "",
				imageURL: "../../img/1.jpg",
				list: []
			},
			created: function() {
				var _this = this;
				ajax({ //获取待付款信息
					url: "http://dsapi.ysd3g.com/api/MyOrderList",
					dataType: "jsonp",
					data: {
						key: newUser.Key //当前用户待付款信息
					},
					success: function(res) {
						if (res.Error) {

						} else {
							for (var i = 0; i < res.Data.length; i++) {
								if (res.Data[i].StatusName == "未支付") {
									_this.list.push(res.Data[i])
								}
							}
						}
						console.log(res);
						console.log(_this.list)
					}
				});
			},
			methods: {
				onClickLeft: function() {
					plus.webview.close(plus.webview.currentWebview(), "slide-out-left");
					console.log("返回个人页面")
				},
				pay: function() {
					console.log(newUser);
					var _this = this;
					ajax({ //支付
						url: "http://dsapi.ysd3g.com/api/OrderPay",
						dataType: "jsonp",
						data: {
							key: newUser.Key, //登陆返回的Key
							oId: localStorage.getItem('orderId'), //订单Id
							payType: '1', //可以写死支付宝
							addressIdx: "", //可为空,收货地址
							moey: "0.01" //总价,随意写
						},
						success: function(res) {
							if (res.Error) {
								alert(res.Msg)
							} else {
								var payment = "";
								plus.payment.getChannels(function(s) {
									console.log(s);
									plus.payment.request(s[0], res.strJson, function() {
										vm.$toast.success("支付操作成功！");
										localStorage.removeItem(orderId);
									})
								})
							}
							console.log(res);
						}
					});
					console.log("跳转支付页面")
				},
				quxiao: function(id) { //取消订单
					console.log(id)
					var _this = this;
					_this.$dialog.confirm({
						title: '取消',
						message: '确认取消订单吗？'
					}).then(() => { //确认
						ajax({ //取消订单
							url: "http://dsapi.ysd3g.com/api/DeleteOrder",
							dataType: "jsonp",
							data: {
								key: newUser.Key, //当前用户待付款信息
								oId: id
							},
							success: function(res) {
								if (res.Error) {
									_this.$toast.fail("出现错误，请稍后再试！")
								} else {
									plus.webview.currentWebview().reload();
									_this.$toast.success("取消订单成功！");
								}
							}
						});
					}).catch(() => { //取消

					});
				}
			}

		})
	</script>
</html>
